<template>
  <div ref="appContainer" class="app-container">
    <PropTable
      :loading="loading"
      :show-search-form="false"
      :columns="baseColumns"
      :data="list"
      :total="total"
      @reset="reset"
      @on-submit="onSubmit"
    >
    </PropTable>
  </div>
</template>
<script lang="ts" setup name="userManage">
  import { columns } from './constants'
  import { getsUserCommonList } from '@/api/user'
  const loading = ref(false)
  const appContainer = ref(null)
  const data = []
  let baseColumns = reactive(columns)
  const list = ref(data)
  const total = ref(0)
  const pagedata = {
    pageSize: 20,
    pageNum: 1,
  }
  onMounted(() => {
    for (let item of baseColumns) {
      if (item.search) {
        item.value = ''
      }
    }
    console.log(baseColumns)
    getList(pagedata)
  })
  //获取列表信息
  const getList = (data) => {
    getsUserCommonList(data).then((res) => {
      list.value = res.records
      total.value = res.total
    })
  }

  const reset = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  const onSubmit = (val) => {
    const data = JSON.parse(JSON.stringify(val))
    getList(data)
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
</script>

<style scoped lang="scss">
  .custom {
    margin-bottom: 10px;
  }
  .footer {
    flex: 1;
    display: flex;
    padding: 16px;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    min-height: 300px;
    .pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 20px;
      box-sizing: border-box;
    }
  }
  .table {
    position: relative;
    flex: 1;
  }
  .zb-table {
    position: absolute;
    height: 100%;
  }
</style>
